const fns = {
	player_join: null,
}
const vars = {
	player: {id: '', pos: {}, sprite: null},
	players: [],
}

function player(PIXI, x=10, y=10){
	let rectangle = new PIXI.Graphics(); 
	rectangle.lineStyle(4, 0xFF3300, 1); 
	rectangle.beginFill(0x66CCFF); 
	rectangle.drawRect(0, 0, 64, 64); 
	rectangle.endFill(); 
	rectangle.x = x; 
	rectangle.y = y; 

	//velocity
	rectangle.vx = 0
	rectangle.vy = 0
	rectangle.tarx = x
	rectangle.tary = y
	return rectangle
}

function start_pixi(){
	let app = new PIXI.Application({width: 600, height: 600});  
	window.app = app

	//Add the canvas that Pixi automatically created for you to the HTML document 
	document.body.appendChild(app.view);

	const p = player(PIXI)

	app.stage.addChild(p)

	vars.player.pos = {
		x: p.x,
		y: p.y,
	}
	vars.player.sprite = p
}

function spawn_sprite(p, players){
	const sprite = player(PIXI, p.pos.x, p.pos.y)
	console.log(sprite)
	players.push({
		id: p.id,
		pos: {
			x: p.pos.x,
			y: p.pos.y,
		},
		sprite
	})

	app.stage.addChild(sprite)
	
	return players
}

function not_in(p, players){
	return find_player(p.id, players) == null
}

function find_player(id, players){
	return players.find(p => {
		return p.id == id
	})
}

function get_velocitys(speed, dx, dy){
	const kx = dx < 0 ? -1 : 1
	const ky = dy < 0 ? -1 : 1
	if(dx == 0 && dy ==0){return {vx: 0, vy: 0}}
	if(dx == 0){
		return {vx: 0,vy: ky * speed}
	}
	if(dy == 0){
		return {vx: kx * speed,vy: 0}
	}
	const rate = dx / dy
	const vy = Math.sqrt((speed * speed) / (rate * rate + 1))
	const vx = rate * vy
	return {vx: kx * Math.abs(Math.floor(vx)),vy: ky *  Math.abs(Math.floor(vy))}
}

function compare_and_set_velocity(players, ps){
	ps.forEach(p => {
		const s = find_player(p.id, players).sprite
		if(s != null){
		const dx = p.pos.x -s.x
		const dy = p.pos.y -s.y
		//set velocity according to dx dy
		const speed = 25
		const vs = get_velocitys(speed, dx, dy)
		s.vx = vs.vx
		s.vy = vs.vy

		s.tarx = p.pos.x
		s.tary = p.pos.y
		}
		
	})
}

function set_tar_point(players, ps){
	ps.forEach(p => {
		const s = find_player(p.id, players).sprite
		s.tarx = p.pos.x
		s.tary = p.pos.y
	})
}

function start_sio(){
	let s = io()

	s.on('id', id => {
		//set id for player
		vars.player.id = id

		s.on('players', ps => {
			ps = JSON.parse(ps)
			ps = ps.filter(p => {
				return p.id != vars.player.id
			})

			ps.forEach(p => {
				if(not_in(p, vars.players)){
					spawn_sprite(p, vars.players)
				}
			})

			//set_tar_point(vars.players, ps)

			compare_and_set_velocity(vars.players, ps)
		})

		//Every 3 second send pos message
		let t = new MyTicker(2)
		t.add(() => {
			s.emit('player', JSON.stringify({
				id: vars.player.id,
				pos: {
					x: vars.player.sprite.x,
					y: vars.player.sprite.y,
				},
			}))
		})
		t.start()

	})
}

function move(s){
	s.x += s.vx
	s.y += s.vy
}

function main_logic(){
	
	vars.players.forEach(({sprite}) => {
		const old_dx = sprite.tarx - sprite.x
		const old_dy = sprite.tary - sprite.y
		const new_dx = sprite.tarx - (sprite.x + sprite.vx)
		const new_dy = sprite.tary - (sprite.y + sprite.vy)

		if(old_dx * new_dx < 0){
			sprite.vx = 0
		}
		if(old_dy * new_dy < 0){
			sprite.vy = 0
		}

		move(sprite)
	})
	
	move(vars.player.sprite)
}

function mount_keys(){
	const s = vars.player.sprite
	my_keyboard.mount_down('s', () => {
		s.vy = 3
	})
	my_keyboard.mount_down('w', () => {
		s.vy = -3
	})
	my_keyboard.mount_down('a', () => {
		s.vx = -3
	})
	my_keyboard.mount_down('d', () => {
		s.vx = 3
	})

	my_keyboard.mount_up('s', () => {
			s.vy = 0
	})
	my_keyboard.mount_up('w', () => {
			s.vy = 0
	})
	my_keyboard.mount_up('a', () => {
			s.vx = 0
	})
	my_keyboard.mount_up('d', () => {
			s.vx = 0
	})
}

function start_game(){
	//main loop
	const t= new MyTicker(0.1)
	t.add(main_logic)
	t.start()

	mount_keys()
}

start_pixi()
start_sio()
start_game()

